<!DOCTYPE html>

<html>
	<head>
		<meta name="viewport" content="width=device-width" />
		<title>GetCurrInfoList</title>
		<script src="~/js/vue2.6.10.js"></script>
		<link href="~/css/element-ui.css" rel="stylesheet" />
		<script src="~/js/element-ui.js"></script>
		<script src="~/js/dateformat.js"></script>
		<!-- <script src="~/js/jquery-1.7.2.js"></script> -->
		<script src="~/js/axios.js"></script>
		<script src="~/js/qs.js"></script>
		<!-- <script src="~/js/utils.js"></script> -->
		<style type="text/css">
			[v-cloak] {
				display: none;
			}

			.el-pagination {
				margin-left: 45%;
				margin-top: 2%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2>详细日志</h2>
			<div style="margin: 20px auto; width: 1000px;">
				<span>选择要操作的日期:</span>
				<el-date-picker v-model="log_date" format="yyyy-MM-dd" :default-value="log_date" type="date" :picker-options="pickerOptions"
				 placeholder="选择操作日期"></el-date-picker>
				<el-button type="primary" plain v-on:click="select">点击查询</el-button>
				<el-button type="primary" plain v-on:click="down">点击下载</el-button>
				<el-button type="primary" plain v-on:click="del">点击删除</el-button>
			</div>
			<el-table :data="tableData" style="width: 1400px; margin: 0 auto;">
				<el-table-column label="详细日志" align="center">
					<template slot-scope="scope">
						{{scope.row}}
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页器 -->
			<el-pagination background layout="prev, pager, next" :total="page.total" v-on:current-change="handleCurrentChange"
			 :current-page="page.PageIndex" :page-size="page.PageSize" class="el-pagination"></el-pagination>
		</div>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					log_date: new Date(),
					page: {
						PageSize: 10,
						PageIndex: 1,
						total: 1
					},
					pickerOptions: {
						disabledDate(time) {
							return time.getTime() > Date.now();
						}
					},
					tableData: [],
					obj: {

					}
				},
				methods: {
					/*
					 * 点击页码的时候
					 */
					handleCurrentChange: function(currPage) {
						this.page.PageIndex = currPage;
						//获取数据
						this.getData();
					},
					/**
					 * 点击查询
					 */
					select: function() {
						this.page.PageIndex = 1;
						this.page.total = 1;
						this.getData();
					},
					down: function() {
						window.location.href = '/InfoLog/DownLogFile?selectDate='+this.log_date.Format("yyyy-MM-dd");
					},
					del: function() {
						axios({
							method: 'get',
							url: '/InfoLog/DelLogFile?selectDate='+this.log_date.Format("yyyy-MM-dd")
						}).then(res => {
							if (res.data.state == 200) {
								this.$message({
									message: res.data.message,
									type: 'success',
									offset: 200
								});
								setTimeout(function() {
									location.reload();
								}, 1000);
							} else {
								this.$message({
									message: res.data.message,
									type: 'warning',
									offset: 200
								});
							}
						}).catch(err => {

						});
					},
					// 获取table数据
					getData: function() {
						this.page['selectDate'] = this.log_date.Format("yyyy-MM-dd");
						axios({
							method: 'POST',
							url: '/InfoLog/GetCurrInfoList',
							data: Qs.stringify(this.page)
						}).then(res => {
							if (res.data.state == 200) {
								this.tableData = res.data.data;
								this.page.total = res.data.total;
							} else {
								this.tableData = [];
								this.$message({
									message: data.message,
									type: 'warning',
									offset: 200
								});
							}
						}).catch(err => {

						});
					},
				},
				created() {
					this.getData();
				}
			});
		</script>
	</body>
</html>
